<template>
   <div class="activity-like views-container">
       <div class="wlm-table">
             <div class="wlm-table-hearder-btn">
                <router-link tag="span" to="/application/paymentMarketingAdd">
                    <el-button size="small" type="primary">添加活动</el-button>
                </router-link>
        </div>
           <div class="wlm-table-header">
            <el-form :model="tableFormatData.paymentMarketing.files"  size="small" label-width="85px" class="retail-form" label-position="right">
                <el-form-item label="" class="filter">
                    <el-form-item label="活动名称：">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.paymentMarketing.files.title" placeholder="请输入活动名称" style="width:160px;"></el-input>
                    </el-form-item>
                    <el-form-item label="活动状态：">
                          <el-select v-model="tableFormatData.paymentMarketing.files.status" placeholder="请选择">
                            <el-option
                            v-for="item in [{ value: '0',label: '未开始'},{ value: '1',label: '进行中'},{ value: '2',label: '暂停'},{ value: '3',label: '已结束'}]"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text"  @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
           <div class="wlm-table-content">
                 <el-table :ref="tableFormatData.paymentMarketing.key" :data="tableFormatData.paymentMarketing.tableData" @selection-change="handleSelectionChange" style="width: 100%">
                        <el-table-column prop="date" label="活动名称" min-width="60">
                            <template slot-scope="scope">
                                <span>{{scope.row.name}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="有效期" min-width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.time_type==1">长期有效</span>
                                  <!-- <span>{{scope.row.creation_time| parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span> -->
                                <span v-if="scope.row.time_type==2">{{scope.row.start_time| parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}-{{scope.row.end_time| parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="状态" min-width="60">
                            <template slot-scope="scope">
                                <span v-if="scope.row.status==0">未开始</span>
                                <span v-if="scope.row.status==1">进行中</span>
                                <span v-if="scope.row.status==2">暂停</span>
                                <span v-if="scope.row.status==3">已结束</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="指定商品" min-width="60">
                            <template slot-scope="scope">
                                <span v-if="scope.row.appoint_type==1">全部商品</span>
                                <span v-if="scope.row.appoint_type==2">指定分类</span>
                                <span v-if="scope.row.appoint_type==3">指定商品</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="创建时间" min-width="60">
                            <template slot-scope="scope">
                                <span>{{scope.row.create_time}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="操作" min-width="60">
                            <template slot-scope="scope">
                                 <div class="operation-group">
                                  <router-link class="wlm-text" tag="span" :to="{path:'/application/paymentMarketingAdd', query:{id:scope.row.id}}">
                                  <!-- <router-link class="wlm-text" tag="span" :to="{path:'/application/paymentMarketingAdd'}"> -->
                                        <el-button type="text">编辑</el-button>
                                </router-link>
                                  <div class="btn-line"></div>
                                <el-button class="wlm-text" type="text"  @click="delbtn(scope.row.id)">删除</el-button>
                                <div class="btn-line"></div>
                                <el-button class="wlm-text" type="text" @click="handstopbtn(scope.row.id,scope.row.status)">{{scope.row.status==1?'暂停':scope.row.status==2?'继续':''}}</el-button>
                                <div class="btn-line" v-if="scope.row.status==1|| scope.row.status==2"></div>
                                 <router-link class="wlm-text" tag="span" :to="{path:'/application/rewardRecord', query:{id:scope.row.id}}">
                                        <el-button class="wlm-text" type="text">参与记录</el-button>
                                 </router-link>
                                 </div>
                            </template>
                        </el-table-column>
                 </el-table>
                  <div class="pagination-content flex-row flex-justify-e flex-align-c">
                    <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.paymentMarketing.pagination.page" :page-sizes="tableFormatData.paymentMarketing.pagination.pagesizes" :page-size.sync="tableFormatData.paymentMarketing.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.paymentMarketing.pagination.total : 0">
                    </el-pagination>
                </div>
           </div>
       </div>
   </div>
</template>
<script>
import { getPayMarketingList,delPayMarketing,editStatusPayMarketing} from "@/api/application";
    import mixins from '@/mixins/mixins'

export default {
mixins: [mixins.getters('Table')],
 name:'paymentMarketing',
    data () {
        return {
           tableFormatData: {
                current: 'paymentMarketing',
                paymentMarketing: {
                    key: 'paymentMarketing',
                    api: {
                        getList:getPayMarketingList,
                        //  delList: delPayMarketing
                    },
                    tableData: [],
                    files: {
                    },
                    rowId: "id",
                      pagination: {
                        page: 1,
                        list_rows: 10,
                        pagesizes: [10, 20, 50],
                        total: 0
                    }
                }
            }, 
        }
    },
    methods: {
         delbtn(id){
              this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                     delPayMarketing({id:id}).then(res=>{
                         if(res.data.code==1){
                             this.$message.success(res.data.msg)
                             this.filesSerch()
                         }
             })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            
         },
         handstopbtn(id,status){
            
             this.$confirm( `${status==1?"此操作将暂停活动，是否继续操作？":"此操作将继续活动，是否继续操作？"}`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                     editStatusPayMarketing({id:id,status:status==1?2:1}).then(res=>{
                         if(res.data.code==1){
                             this.$message.success(res.data.msg)
                             this.filesSerch()
                         }
             })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
         },
    }
}
</script>